// 在函数接收父组件参数props
import {useState} from "react";

function HeaderTwo(props) {
    let childValue = "我是子组件的数据，即将传递过去";
    const [displayFlag, setDisplayFlag] = useState(true);
    const [color, setColor] = useState("yellow");
    const displayFun3 = () => {
        props.displayFun(displayFlag);
        setDisplayFlag(!displayFlag)
    }
    const colorCheck = () => {
        // 当displayFlag为false的时候，代表true已经被赋值出去。也就是说现在页面是显示状态
        if (displayFlag === false) {
            props.colorCheckFun(color);
            switch (color) {
                case "yellow":
                    setColor("green");
                    break;
                case "green":
                    setColor("pink");
                    break;
                case "pink":
                    setColor("red");
                    break;
                case "red":
                    setColor("yellow");
                    break;
                default:
                    break;
            }
        }
    }
    return (
        <>
            <div>这是第二个头部</div>
            {/*首先数组在进行显示的时候，可以用map进行遍历，在react中，map似乎很常用*/}
            {/*然后要想好数组遍历后的显示方式，不能直接显示*/}
            {/*显示的值直接用div包裹，就像HTML一样写，不过jsx的话，如果这个div是条件渲染出来的，那么连判断语句都要写在{}里面*/}
            {/*然后数组在遍历之前需要做条件渲染，这样map才不会报错*/}
            {/*使用父组件参数*/}
            {/*props的属性是只读的，不可以修改。这个和vue相似。如果你想修改的话，建议将props的值赋值给其他值之后再进行修改*/}
            {props.arrList && props.arrList.length > 0 && props.arrList.map((item, index) => (
                <div key={index}>
                    a: {item.a}、b: {item.b}、 c:{item.c}
                </div>
            ))}
            {/*子组件向父组件传递参数，需要在前面加上 ()=> 这样做是为了不在渲染的时候调用props.childrenValue,而是在点击调用的时候再进行调用*/}
            <button onClick={() => props.childrenValue(childValue)}>子组件向父组件传递参数</button>
            <button onClick={displayFun3}>显示或者取消色块</button>
            <button onClick={colorCheck}>颜色切换</button>
        </>
    )
}

export default HeaderTwo;
